<template>
  <div>
    <div class="title">
      <div class="diyi"></div>
      <font>待处理服务</font>
    </div>
    <div class="dier">
      <el-form ref="form" :model="form" label-width="70px">
        <table  border="0" width="100%" height="40px">
          <tr align="right">
            
            <td width="60px">
              <font class="font1">服务状态&nbsp;&nbsp;</font>
            </td>


            <td width="230px" align="left">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in list"
                  :label="item.label"
                  :key="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>


            <td width="60px" >
              <font class="font1">签约机构</font>
            </td>
            <td width="230px" align="left">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in list1"
                  :label="item.organization_name"
                  :key="item.organization_id"
                  :value="item.organization_id"
                >
                </el-option>
              </el-select>
            </td>
            <td>
              <font class="font1">医生团队</font>
            </td>
            <td width="230px" align="left">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in list2"
                  :label="item.doctor_name"
                  :key="item.doctor_id"
                  :value="item.doctor_id"
                >
                </el-option>
              </el-select>
            </td>
            <td align="right">
              <el-button type="primary" @click="addserve()">新增服务</el-button>
            </td>
            <td align="right">
              <el-button type="primary" @click="onSubmit">导出</el-button>
            </td>
          </tr>
        </table>
        <table  border="0" width="100%" height="40px">
          <tr align="right">
            <td width="60px">
              <font class="font1">服务包&nbsp;&nbsp;</font>
            </td>
            <td width="230px" align="left">
              <el-select v-model="value3" placeholder="请选择">
                <el-option
                  v-for="item in list3"
                  :label="item.serve_name"
                  :key="item.serve_id"
                  :value="item.serve_id"
                >
                </el-option>
              </el-select>
            </td>
            <td width="60px">
              <font class="font1">预约时间&nbsp;&nbsp;</font>
            </td>
            <td  colspan="3" align="left">
              <el-date-picker
                v-model="value4"
                format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy/MM/dd HH:mm:ss"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 400px"
              >
              </el-date-picker>
            </td>
            <td width="320px" colspan="2">
              <el-input v-model="username" class="shuru"></el-input><i class="el-icon-search biaobiao" @click="onSubmit"></i>
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <!-- <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button> -->
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8080"
export default {
  data() {
    return {
      list:[
        {
          value:1,
          label:"待审核"
        },
         {
          value:2,
          label:"待服务"
        },
         {
          value:3,
          label:"已驳回"
        },
      ],
      value: "",//状态

      list1:"",//签约机构
      value1: "",

      list2:"",
      value2: "",//医生

      list3: "",
      value3: "",//宝

      value4: "",//时间
      username: "",
    };
  },
  methods: {
    addserve(){
      this.$router.push({
        path:'/serve08',
        
      });
    },
    onSubmit(){
      // alert(this.value1)
      //this.value,,this.value2,this.value3,this.value4,this.serviceName
       this.$emit('subFn',this.value,this.value1,this.value2,this.value3,this.value4,this.username)
    },
    // query(){
    //   axios({
    //         url:'/getServiceStatus',
    //         method:'GET',
    //     }).then((res) => {
    //         this.list=res.data      //把值传到list里面
    //     })
    // },
    query1(){
      axios({
            url:'/sign/getOrganizationList',
            method:'GET',
        }).then((res) => {
            this.list1=res.data      //把值传到list里面
            console.log(res.data);
        })
    },
    query2(){
      axios({
            url:'/doctor/getDoctorList',
            method:'GET',
        }).then((res) => {
            this.list2=res.data      //把值传到list里面
            console.log(res.data);
        })
    },
    query3(){
      axios({
            url:'/sign/getServePageList',
            method:'GET',
        }).then((res) => {
            this.list3=res.data      //把值传到list里面
            console.log(res.data);
        })
    }
  },
  created () {
    //  this.query()
     this.query1()
     this.query2()
     this.query3()
  }

}
</script>

<style>
.shuru{
  position: relative;
  top: 10px;
}
.biaobiao{
  position: relative;
  top: -20px;
  left: -10px;
}
.tubiao {
  float: left;
  margin-top: -10px;
  margin-left: 10px;
  /* z-index: 100; */
}
.table2 {
  float: left;
  margin-top: 1.5%;
  /* margin-left: 2%; */
}
.table1 {
  float: left;
  /* margin-top: 1%; */
  /* margin-left: 2%; */
}
.font1 {
  font-size: 13px;
  color: #999999;
}
.dier{
  width: 96%;
  height: 110px;
  font-size: 18px;
  /* background: rgb(174, 63, 63); */
  margin-top: 1%;
  margin-left: 2%;
}
.diyi {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.title {
  width: 100%;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
</style>